import { ReactViewState, ReactView, reactControl, ReactViewControl } from "pao-aop-client";
import React from "react";
import { addon } from "pao-aop";
import { FontIcon } from "src/projects/components/icon";
import { ROUTE_PATH } from "src/projects/app/util-tool";
/**
 * 组件：互动页控件状态
 */
export interface InteractionViewState extends ReactViewState {
}

/**
 * 组件：互动页控件
 */
export class InteractionView extends ReactView<InteractionViewControl, InteractionViewState> {
    public lv: any = null;
    constructor(props: any) {
        super(props);
    }
    componentDidMount() {

    }
    leavingMessage = () => {
        this.props.history!.push(ROUTE_PATH.messageInteraction);
    }
    render() {
        return (
            <div
                style={{
                    position: 'fixed',
                    top: '0',
                    bottom: '0',
                    width: '100%',
                }}
            >
                <div
                    style={{
                        display: 'flex',
                        height: '100%',
                        width: '100%',
                        justifyContent: 'center',
                        alignItems: 'center'
                    }}
                >
                    <div>
                        <div
                            style={{
                                marginTop: '-60px',
                                marginBottom: '60px',
                            }}
                        >
                            <div
                                style={{
                                    height: '120px',
                                    width: '120px',
                                    textAlign: 'center',
                                    border: '2px #d81e06 solid',
                                    borderRadius: '50%',
                                    paddingTop: '15px',
                                    color: '#d81e06',
                                }}
                                onClick={this.leavingMessage}
                            >
                                <FontIcon style={{ fontSize: '80px', color: '#d81e06' }} type="iconz053" />
                            </div>
                            <p style={{ textAlign: 'center', fontWeight: 'bold', marginTop: '10px', }}>在线留言</p>
                        </div>
                        <div>
                            <a href="tel:4000123495">
                                <div
                                    style={{
                                        height: '120px',
                                        width: '120px',
                                        textAlign: 'center',
                                        border: '2px #d81e06 solid',
                                        borderRadius: '50%',
                                        paddingTop: '15px',
                                        color: '#d81e06',
                                    }}
                                >
                                    <FontIcon style={{ fontSize: '80px', color: '#d81e06' }} type="icontianchongxing-" />
                                </div>
                            </a>
                            <span style={{ textAlign: 'center', marginTop: '10px', fontWeight: 'bold', display: 'block' }}>电话咨询</span>
                            <span style={{ textAlign: 'center', fontWeight: 'bold', display: 'block' }}>4000123495</span>
                        </div>
                    </div>

                </div>
            </div>
        );
    }
}

/**
 * 组件：互动页控件
 * 控制互动页控件
 */
@addon('InteractionView', '互动页控件', '控制互动页控件')
@reactControl(InteractionView, true)
export class InteractionViewControl extends ReactViewControl {
    constructor() {
        super();
    }
}
